import React, { Component } from 'react'
import "./mycertificate.scss"
import { getApiUserDiploma , getApisaveUserDiplomaImage } from "../../axios/api"
import { get } from '../../axios/localstorage'
import { message } from 'antd'

export default class mycertificate extends Component {


    state = {
        list:[],
        data:{},
        alert:false,
        fname:''
    }

    componentWillMount(){
        this.getData();
    }

    componentDidMount(){
        window.scroll(0,0);
    }

    getData=()=>{
        let param = {
            token:get('token'),
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        }

        getApiUserDiploma(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                   list:data.list,
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoShowPrint=(data)=>{
        this.setState({
            data
        })

        setTimeout(()=>{
            this.doPrint();
        },50);
    }

    doPrint = () => {

        const el = document.getElementById('printBox');
        const iframe = document.createElement('IFRAME');
        let ppp = document.getElementById('ppp');
        let doc = null;
        // iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;top:500px;');
        ppp.appendChild(iframe);
        doc = iframe.contentWindow.document;
        // 引入打印的专有CSS样式，根据实际修改
        // doc.write('<LINK rel="stylesheet" type="text/css" href="css/print.css">');
        doc.write(el.innerHTML);
        doc.close();
        // 获取iframe的焦点，从iframe开始打印
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
        if (navigator.userAgent.indexOf("MSIE") > 0){
            ppp.removeChild(iframe);
        }
    }

    gotoLoadImg=(event)=>{
        let file = event.target.files[0];

        console.log(file);
        this.setState({
            fname:file.name
        })

        let fd = new FormData()
    
        fd.append('file', file)
        fd.append('token', get('token'));
        // fd.append('type',2);

        getApisaveUserDiplomaImage(fd)
        .then( req =>{
            console.log(req.data);
            if(req.data.code === 1){
                message.success("上传成功！");
                return false;
            }else{
                message.info(req.data.msg);
            }
        }).catch( err =>{
            console.error(err)
        })

    }

    render() {
        return (
            <div className="mycertificate">
                <div className="cmain">
                    
                    <div className="cname">
                        <h1>我的证书</h1>
                        {/* <div className="cload">
                            <img alt="" src="assets/imgs/shangchuan.png" />
                            <h4>上传证件照</h4>
                            <input value="" className='load' onChange={(ev)=>{this.gotoLoadImg(ev)}} type="file" accept="image/*" id="inputFile"  />
                        </div>
                        <p>{this.state.fname}</p> */}
                    </div>

                    <div className="none" hidden={this.state.list.length !== 0}>
                        <div className="cen">
                            <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                        </div>
                        <p>暂无证书记录</p>
                    </div>


                    <table hidden={this.state.list.length === 0}>
                        <thead>
                            <tr>
                                <th>课程名称</th>
                                <th>证书名称</th>
                                <th>证书号</th>
                                <th>发证时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                this.state.list.map((item,index)=>{
                                    return <tr key={index}>
                                                <td>{item.courses.title}</td>
                                                <td>{item.certificate_title}</td>
                                                <td>{item.certificate_sn}</td>
                                                <td>{item.create_time_text}</td>
                                                <td>
                                                    <div className="options">
                                                        {/* <div className="op_img">
                                                            <div className="cen">
                                                                <img alt="" src="assets/imgs/hecheng.png" />
                                                            </div>
                                                            <p>照片合成</p>
                                                        </div> */}
                                                        <div className="op_item" onClick={()=>{this.setState({alert:true,data:item})}}>
                                                            <img alt="" src="assets/imgs/chakan.png" />
                                                            <p>查看</p>
                                                        </div>
                                                        <div className="op_item" onClick={()=>{this.gotoShowPrint(item)}}>
                                                            <img alt="" src="assets/imgs/dayin.png" />
                                                            <p>打印</p>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                })
                            }
                        </tbody>
                    </table>
                </div>

                <div className="printBox" id="printBox" hidden>
                    <img alt="" className="img" src={this.state.data.path_text} />
                </div>

                <div className="ppp" id="ppp"></div>

                <div className="alert" hidden={!this.state.alert}>
                    <div className="abox">
                        <img alt="" className="img" src={this.state.data.path_text} />
                        <div className="cen">
                            <img alt="" onClick={()=>{this.setState({alert:false})}} className="icon" src="assets/imgs/close.png" />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
